<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-07-28 15:04:13
 * @LastEditTime: 2023-07-29 12:33:29
 * @FilePath: \my-wyy\src\components\Search\SearchSong.vue
-->
<template>
  <div class="wyy-search">
    <van-search v-model="searchValue" placeholder="搜索歌曲，歌手，专辑" shape="round" @search="onSearch(searchValue)"/>
    <van-divider />
    <div class="wyy-search-hot" v-if="isShow">
      <p class="wyy-hot-title">热门搜索</p>
      <ul class="wyy-hot-list">
        <li class="wyy-hot-item" v-for="item in searchList" :key="item.first" @click="handerSearch(item.first)">
          {{item.first}}
        </li>
      </ul>
    </div>
    <div class="wyy-search-list" v-else>
      <p class="wyy-seaList-title">最佳匹配</p>
      <div class="wyy-search-optimum">
        <van-image
        width="50"
        height="50"
        :src="bestFit.url"
        />
        <p class="wyy-search-songer">歌手: {{bestFit.name}}</p>
      </div>
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="wyy-search-item" v-for="item in searchSongs" :key="item.id">
          <router-link :to="{name: 'song', query: {id: item.id}}">
            <MusicItem :songData="songData(item)"/>
          </router-link>
        </div>
      </van-list>
      
    </div>
  </div>
</template>

<script setup>
import request from '@/utils/request'
import MusicItem from '../MusicItem.vue';
import {ref, computed, watchEffect} from 'vue'
const searchSongs = ref([])
const searchValue = ref('')
const isShow = ref(true)
const loading = ref(false);
const finished = ref(false);
const pageNumber = ref(1);
const songCount = ref(0)
defineProps({
  searchList: {
    type: Array,
    default: () => []
  },
  searched: {
    type: Boolean
  }
})
defineExpose({
  initSearch
})
const bestFit = computed(() => {
  return {
    name: (searchSongs.value)[0]?.artists[0].name,
    url: (searchSongs.value)[0]?.artists[0].img1v1Url
  }
})

const songData = computed(() => {
    return (item) => {
      return {
        id: item.id,
        name: item.name.replace(new RegExp(searchValue.value), `<em class="keyword">${searchValue.value}</em>`),
        alias: item.alias.length ? item.alias[0] : '',
        sqMusic: item.sq ?? false,
        musicInfo: `${item.artists[0].name} - ${item.name}`.replace(new RegExp(searchValue.value), `<em class="keyword">${searchValue.value}</em>`)
      }
    }
  })

  function initSearch () {
    searchValue.value = ''
    searchSongs.value = []
    pageNumber.value = 1
  }
async function handerSearch (keywords) {
  searchSongs.value = []
  pageNumber.value = 1
  searchByKeyWords(keywords, 20)
  isShow.value = false
  searchValue.value = keywords
}

async function onSearch (keywords) {
  searchSongs.value = []
  pageNumber.value = 1
  if (keywords.trim() === '')
  {
    return false
  }
  searchByKeyWords(keywords, 20)
  isShow.value = false
}
//通过关键词搜索
const searchByKeyWords = async (keywords,limit) => {
  const data = await request('/search', 'get', {
    keywords,
    limit,
    offset: (pageNumber.value - 1) * 20
  })
  searchSongs.value = [...searchSongs.value, ...data.result.songs]
  songCount.value = data.result.songCount
    // 加载状态结束
    loading.value = false;
  if (pageNumber.value * 30 >= songCount.value)
   {
      finished.value = true;
   }
   pageNumber.value++
}

const onLoad = async () => {
  // 异步更新数据
  let keywords = searchValue.value
  if (pageNumber.value > 1)
  {
    searchByKeyWords(keywords, 20)
  }
}

watchEffect (() => {
  if(searchValue.value.trim() === '')
  {
    isShow.value = true
  }
})
</script>
<style lang="scss" scoped>
.wyy-search-list {
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    .wyy-seaList-title {
      font-size: 12px;
      color: #a6a6a7;
      margin-bottom: 10px;
    }
    .wyy-search-optimum {
      box-sizing: border-box;
      padding-bottom: 15px;
      width: 100%;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f3f3f4;
      .wyy-search-songer {
        font-size: 16px;
        color: #333;
        margin-left: 20px;
      }
    }
}
  .wyy-search-hot {
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    .wyy-hot-title {
      font-size: 12px;
      color: #a6a6a7;
      margin-bottom: 10px;
    }
    .wyy-hot-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        .wyy-hot-item {
          border: 1px solid #ebeeee;
          border-radius: 14px;
          font-size: 14px;
          box-sizing: border-box;
          line-height: 32px;
          padding: 0 10px;
          margin-right: 15px;
          margin-bottom: 10px;
        }
      }
  }
</style>